<template>
	<!-- 20230426 -->
	<view class="mall-detail-page">
		<!-- 页面内容 -->
		<view class="page-content">

			<!-- 返回和分享 只有商品存在时显示 -->
			<view class="jc-header" :style="{background: 'rgba(255, 255, 255, ' + opacity + ')'}"
				v-if="loadFinish && detail.id">

				<!-- #ifdef APP-PLUS -->
				<!-- opacity 0->1 -->
				<view v-if="actualScrollViewTop">
					<!-- 占位 view，避免页面内容出现在状态栏 -->
					<view class="height-status-bar"></view>
				</view>
				<!-- #endif -->

				<view class="width-100p padding-lr-30 flex align-center justify-between">
					<!-- 返回 -->
					<!-- #ifdef APP-PLUS -->
					<view>
						<!-- 只有APP有返回键  bgColor rgba(0, 0, 0, 0.3) -> 透明  color #fff -> #4d4d4d-->
						<view class="radius-50p text-center" style="width: 60rpx; height: 60rpx;"
							:style="{background: bgColor}" @click="go(1,4)">
							<text class="tyIcon-arrow-left line-60 text-44" :style="{color: color}"></text>
						</view>
					</view>
					<!-- #endif -->

					<!-- 吸顶tabs -->
					<view class="flex-one line-height-header">
						<block v-if="actualScrollViewTop >= 50">
							<ty-tab-around :list="tabsList" :list-key="listKey" :active.sync="tabsIndex"
								@click="changeTabs">
							</ty-tab-around>
						</block>
					</view>

					<!-- 分享 -->
					<!-- #ifdef APP-PLUS|H5 -->
					<view v-if="!isWeixinEnv">
						<view class="radius-50p text-center" style="width: 60rpx; height: 60rpx;"
							:style="{background: bgColor}" @click="isShareLayerShow = true">
							<text class="tyIcon-share-1 line-60 text-44" :style="{color: color}"></text>
						</view>
					</view>
					<!-- #endif -->

					<!-- #ifdef MP -->
					<button open-type="share">
						<view class="radius-50p text-center" style="width: 60rpx; height: 60rpx;"
							:style="{background: bgColor}">
							<text class="tyIcon-share-1 line-60 text-44" :style="{color: color}"></text>
						</view>
					</button>
					<!-- #endif -->

				</view>
			</view>

			<!-- 商品页滚动区域 -->
			<scroll-view class="scroll-block padding-bottom-safe-footer" :scroll-top="scrollViewTop" scroll-y
				@scroll="scroll" @scrolltolower="scrolltolower">
				<view class="" v-if="detail.id && loadFinish">
					<!-- 商品板块 -->
					<view id="goods">
						<!-- 轮播图 -->
						<view class="swiper-block">
							<ty-swiper-detail :list="detail.carousel"></ty-swiper-detail>
						</view>

						<!-- 简介 -->
						<view class="padding-lr-30 padding-top-35 padding-bottom-30 bg-ff">
							<view class="flex align-end">
								<!-- 现价 -->
								<view class="line-height-45">
									<text class="text-price text-40 text-main">{{detail.price_min}}</text>
									<text class="text-24 text-main" v-if="detail.price_min != detail.price_max">起</text>
								</view>

								<!-- 原价 -->
								<view class="margin-left-15 line-height-30 text-24 text-aa text-through">
									¥{{detail.price_original}}
								</view>
							</view>

							<!-- 标题 -->
							<view class="margin-top-20 line-50 text-34 text-bold">{{detail.name}}</view>

							<!-- 销量 -->
							<view class="margin-top-10 text-26 text-aa">已售{{detail.sales_number}}</view>
						</view>

						<!-- 服务保障 -->
						<view class="" v-if="detail.mallAttach.length">
							<!-- 组件内容 -->
							<view class="padding-lr-30 height-80 flex align-center bg-main-light"
								v-if="detail.mallAttach.length" @click="isShowAttachServiceLayer = true">

								<text class="line-height-80 text-24 text-main text-bold">保障</text>

								<view class="margin-left-40 line-height-80 flex-one text-cut-one">
									<block v-for="(item,index) in detail.mallAttach" :key="index">
										<text class="margin-lr-15 text-24 text-main" v-if="index > 0">•</text>
										<text class="text-24 text-main">{{item.name}}</text>
									</block>
								</view>

								<text class="tyIcon-arrow-right margin-left-20 line-height-80 text-24 text-main"></text>
							</view>
						</view>

						<!-- 选择规格 有规格时显示 朋友圈模式不显示-->
						<view class="padding-lr-30 flex align-center bg-ff" style="height: 105rpx; line-height: 105rpx;"
							v-if="detail.is_spec_open == 1 && !isSinglePage" @click='skuShow'>
							<view class="text-34 text-bold">规格</view>
							<view class="flex-one margin-left-30 text-right flex align-center">
								<text class="text-28 text-aa text-cut-one flex-one">{{chooseSkuName}}</text>
								<text class="margin-left-15 tyIcon-arrow-right text-24 text-77"></text>
							</view>
						</view>
					</view>

					<!-- 评价板块 -->
					<view id="review" class="margin-top-20 bg-ff">
						<!-- 有评价时 -->
						<view class="padding-top-25 padding-bottom-30" v-if="evaluateList.total">
							<!-- 标题 -->
							<view class="padding-lr-30 flex align-center">
								<text class="line-height-50 text-34 text-bold">商品评价</text>
								<text class="margin-left-10 line-height-50 text-26 text-main">
									{{evaluateList.total}}
								</text>
							</view>

							<!-- 评价 -->
							<view class="">
								<jc-mall-evaluate :evaluate-data="evaluateList.data[0]" :is-show-reply="false"
									:is-show-add-evaluate="false">
								</jc-mall-evaluate>
							</view>

							<!-- 按钮 -->
							<view
								class="margin-top-10 block-center width-220 height-60 radius-30 border-ed text-center text-24 text-77"
								style="line-height: 56rpx;"
								@click="go('/pages/mall/evaluateList?type=1&id=' + productId)">
								查看全部评价
							</view>
						</view>

						<!-- 无评价时 -->
						<view class="padding-lr-30 line-height-100 bg-ff flex align-center justify-between" v-else>
							<text class="text-34 text-bold">商品评价</text>
							<text class="text-28 text-aa">暂时还没有评价哦～</text>
						</view>
					</view>

					<!-- 商品详情 -->
					<view id="detail">
						<view class="line-height-80 flex align-center justify-center">
							<view class="border-line"></view>
							<text class="margin-lr-30 text-28 text-4d">商品详情</text>
							<view class="border-line"></view>
						</view>

						<!-- 富文本 -->
						<view class="padding-top-30 padding-bottom-20 padding-lr-30 bg-ff" v-if="detail.description">
							<ty-text-rich-text :html="detail.description"></ty-text-rich-text>
						</view>
					</view>
				</view>

				<view class="padding-top-30 padding-bottom-50" v-else-if="!detail.id && loadFinish">
					<ty-text-no-data text="商品已过期或已删除" @btnClick="go('/pages/mall/index',3)"></ty-text-no-data>
				</view>

				<!-- 推荐商品列表 -->
				<view class="" id="goods-list">
					<view class="margin-top-20 line-height-40 flex align-center justify-center">
						<view class="border-line"></view>
						<text class="margin-lr-30 text-28 text-4d">好物推荐</text>
						<view class="border-line"></view>
					</view>

					<jc-mall-productList :list="list" :loadStatus="loadStatus" :is-label-show="true">
					</jc-mall-productList>
				</view>
			</scroll-view>

			<!-- 底部条 -->
			<block v-if="loadFinish && detail.id && !isSinglePage">
				<jc-mall-buyBottomBar :is-collect="isCollect" :cart-type-number="cartTypeNumber"
					@collect="collectProduct" @cart="go('/pages/mall/cart',3)" @account="account" @buy="skuShow">
				</jc-mall-buyBottomBar>
			</block>

			<!-- 返回顶部和返回首页 -->
			<view class="btn-block">
				<ty-text-top-home :scroll-top="actualScrollViewTop" @topClick="topClick"
					@homeClick="go('/pages/mall/index',3)"></ty-text-top-home>
			</view>
		</view>

		<!-- 页面浮层 -->
		<view class="page-layer">
			<block v-if="detail.id">
				<!-- 分享浮层 -->
				<ty-layer-share :show.sync="isShareLayerShow" :title="share.title" :href="share.href"
					:image-url="share.image_url"></ty-layer-share>

				<!-- 规格弹出框 -->
				<ty-layer-sku :product.sync="detail" :show.sync="isSkuLayerShow" :btn-type="skuBtnType"
					@confirm="confirm">
				</ty-layer-sku>

				<!-- 服务保障浮层 -->
				<ty-layer-attach-service :list="detail.mallAttach" :show.sync="isShowAttachServiceLayer">
				</ty-layer-attach-service>

				<!-- 登录浮层 -->
				<ty-register-login :show.sync="isRegisterLayerShow" :agree.sync="isRegisterAgree">
					<!-- #ifdef APP-PLUS -->
					<view class="bg-ff">
						<!-- 占位 view，避免页面内容出现在状态栏 -->
						<view class="height-status-bar"></view>
					</view>
					<!-- #endif -->
				</ty-register-login>
			</block>
		</view>
	</view>
</template>

<script>
	import mall from './api/mall.js'
	export default {
		data() {
			return {
				// 商品ID
				productId: '',
				// 商品详情
				detail: {},
				// 评论 显示单条
				evaluateList: {},
				// 购物车种类数量
				cartTypeNumber: 0,
				// 客服手机号
				linkTel: '',
				// 购买方式 1--加入购物车 2--立即购买
				buyType: '',
				// 选中的SKU名称
				chooseSkuName: '选择您需要的规格',
				// 是否收藏
				isCollect: false,
				// 是否加载完商品详情
				loadFinish: false,

				// 服务保障浮层是否显示
				isShowAttachServiceLayer: false,
				// 分享浮层是否显示
				isShareLayerShow: false,
				// 规格浮层是否显示
				isSkuLayerShow: false,
				// SKU按钮加载样式 1--显示1个按钮 确定 2--显示2个按钮 加入购物车和立即购买
				skuBtnType: 2,

				// 加载状态
				loadStatus: '',
				// 推荐商品列表
				list: [],
				// 分享内容
				share: {},

				// 吸顶条的透明度
				opacity: 0,
				// 吸顶条按钮背景色
				bgColor: 'rgba(170, 170, 170, .5)',
				// 吸顶条按钮颜色
				color: '#fff',
				// 标签选中索引
				tabsIndex: 0,
				// 标签显示属性
				listKey: 'name',
				// 标签列表
				tabsList: [{
					name: '商品',
					index: 0
				}, {
					name: '评价',
					index: 1
				}, {
					name: '详情',
					index: 2
				}, {
					name: '好物推荐',
					index: 3
				}],
				// scrollView板块滚动距离
				scrollViewTop: 200,
				// 实时滚动的距离
				actualScrollViewTop: 0,
				// 顶部条高度
				headerHeight: 0,
				// 商品信息高度
				goodsHeight: 0,
				// 评论高度
				reviewHeight: 0,
				// 商品介绍高度
				detailHeight: 0,

				// 是否微信环境
				isWeixinEnv: false,
				// 是否是单页模式，朋友圈打开
				isSinglePage: false,
				// 注册浮层是否显示
				isRegisterLayerShow: false,
				// 注册浮层是否选中用户协议
				isRegisterAgree: false,
				// 页面
				query: {}
			}
		},

		onLoad(options) {
			this.productId = options.id || 0

			// #ifdef MP-WEIXIN
			// 小程序判断是否朋友圈单页模式打开
			this.isSinglePage = getApp().globalData.scene == 1154 ? true : false
			// #endif
		},

		onShow() {
			if (this.cn.isLogin()) {
				// 判断商品是否收藏
				mall.isCollect(this.productId).then(res => {
					this.isCollect = res.data.is_collect == 1 ? true : false
				})

				// 购物车种类数量
				mall.cart.countCartTypeNumber().then(res => {
					this.cartTypeNumber = res.data.cart_type_number
				})
			}
		},

		onReady() {
			this.query = uni.createSelectorQuery().in(this)

			if (this.cn.userAgent() == 'weixin') {
				// 微信公众号不能点击页面按钮分享
				this.isWeixinEnv = true
			}

			// 获取客服手机号
			mall.getLinkTel().then(res => {
				this.linkTel = res.data.link_tel
			})

			// 获取详情
			mall.getProduct(this.productId).then(res => {
				this.loadFinish = true
				this.detail = res.data.detail
				this.share = res.data.share
				if (this.detail.id) {

					// 微信公众号分享
					if (this.cn.userAgent() == 'weixin') {
						this.wx.share({
							title: this.share.title,
							desc: this.share.title,
							link: this.share.href,
							imgUrl: this.share.image_url
						})
					}

					// 获取各个模块高度
					setTimeout(res => {
						this.query.select('#goods').boundingClientRect(data => {
							if (data) {
								this.goodsHeight = data.height
								// console.log('商品高度：' + this.goodsHeight)
							}
						}).exec()
						this.query.select('#detail').boundingClientRect(data => {
							if (data) {
								this.detailHeight = data.height
								// console.log('详情高度：' + this.detailHeight)
							}
						}).exec()
					}, 500)
					// 获取顶部栏高度
					// #ifdef APP-PLUS
					this.headerHeight = uni.getSystemInfoSync().statusBarHeight + this.cn.rpx2px(88)
					// #endif
					// #ifndef APP-PLUS
					this.headerHeight = this.cn.rpx2px(88)
					// #endif
				}
			})

			// 商品评论
			this.getEvaluate()

			// 推荐列表
			this.loadList(1)

			// 插入浏览记录
			if (this.cn.isLogin()) {
				mall.insertBrowse(this.productId)
			}
		},

		// #ifdef MP
		// 小程序分享给朋友
		onShareAppMessage(e) {
			if (e.from === 'button') { // 来自页面内分享按钮
				// console.log(e.target)
			}
			return {
				title: this.share.title,
				path: 'pages/mall/detail?id=' + this.productId
			}
		},
		// #endif

		// #ifdef MP-WEIXIN
		// 监听右上角菜单“分享到朋友圈”按钮的行为，并自定义分享内容	
		onShareTimeline() {
			return {
				title: this.share.title, //自定义标题，即朋友圈列表页上显示的标题
				query: 'id=' + this.productId, //自定义页面路径中携带的参数，如 path?a=1&b=2 的 “?” 后面部分
				imageUrl: this.share.image_url
			}
		},
		// #endif

		methods: {

			/**
			 * 获取商品评论
			 * @date 2023-02-01
			 */
			getEvaluate() {
				mall.evaluate.listOneEvaluate(this.productId).then(res => {
					if (res.code == 0) {
						this.evaluateList = res.data.evaluate_list
						// 获取评论模块高度
						setTimeout(res => {
							this.query.select('#review').boundingClientRect(data => {
								if (data) {
									// 模块高度 + 上间距高度
									this.reviewHeight = data.height + this.cn.rpx2px(20)
									// console.log('评价高度：' + this.reviewHeight)
								}
							}).exec()
						}, 500)
					}
				})
			},

			/**
			 * 确认下单
			 * @date 2023-02-01
			 */
			confirm(e) {
				if (this.detail.is_spec_open == 0 && this.detail.stock <= 0) {
					this.cn.toast('库存不足啦!')
					return false
				}
				// 选中SKU名称
				this.chooseSkuName = e.sku_name
				// 购买方式
				this.buyType = (e.type == 1 || e.type == 2) ? e.type : this.buyType

				// 加入购物车
				if (this.buyType == 1) {
					// 加入或更新购物车
					mall.cart.updateCartProduct(this.productId, e.choose_sku, e.buy_number, 0).then(res => {
						if (res.code == 0) {
							this.cartTypeNumber = res.data.cart_type_number
							this.isSkuLayerShow = false
							this.cn.toast(res.msg)
						}
					})
					// 立即购买
				} else if (this.buyType == 2) {
					uni.navigateTo({
						url: '/pages/mall/order?buy_type=2&product_id=' +
							this.productId + '&sku=' +
							e.choose_sku + '&number=' + e.buy_number
					})
				}
			},

			/**
			 * 点击显示SKU浮层
			 * @param {Object} e
			 * @date 2023-02-01
			 */
			skuShow(e) {
				// 没有登录先登录
				if (!this.cn.isLogin()) {
					this.isRegisterLayerShow = true
					return false
				}
				// 已登录
				this.skuBtnType = (e.type == 1 || e.type == 2) ? 1 : 2
				this.isSkuLayerShow = true
				this.buyType = (e.type == 1 || e.type == 2) ? e.type : ''
			},

			/**
			 * 收藏和取消收藏
			 * @date 2023-01-31
			 */
			collectProduct() {
				// 没有登录先登录
				if (!this.cn.isLogin()) {
					this.isRegisterLayerShow = true
					return false
				}
				// 已登录
				let collect_type = this.isCollect ? 0 : 1
				mall.updateCollect(this.productId, collect_type).then(res => {
					if (res.code == 0) {
						this.cn.toast(res.msg)
						this.isCollect = res.data.is_collect ? true : false
					}
				})
			},

			/**
			 * 切换吸顶标签栏
			 * @param {Object} e
			 * @date 2023-01-31
			 */
			changeTabs(e) {
				// 将页面实时的高度传给scroll_view滚动距离
				// this.scrollViewTop = this.actualScrollViewTop

				// 滚动到商品
				if (e.index == 0) {
					setTimeout(() => {
						this.scrollViewTop = 0.01
					}, 50)
					// 滚动到评价
				} else if (e.index == 1) {
					setTimeout(() => {
						this.scrollViewTop = this.goodsHeight - this.headerHeight + 1
					}, 50)
					// 滚动到详情
				} else if (e.index == 2) {
					setTimeout(() => {
						this.scrollViewTop = this.goodsHeight + this.reviewHeight - this
							.headerHeight + 1
					}, 50)
					// 滚动到好物推荐
				} else if (e.index == 3) {
					setTimeout(() => {
						this.scrollViewTop = this.goodsHeight + this.reviewHeight +
							this.detailHeight - this.headerHeight + 1
					}, 50)
				}
			},

			/**
			 * 跟随滚动更改选中状态
			 * @param {Object} e
			 * @date 2023-01-31
			 */
			scroll(e) {
				
				// 当前滚动位置
				this.actualScrollViewTop = e.detail.scrollTop

				// 轮播图高度
				let height = this.cn.rpx2px(750)
				// 顶部条透明度，最开始透明，滚动过轮播图高度时为白色
				this.opacity = this.actualScrollViewTop > height ? 1 : this.actualScrollViewTop / height

				// 滚动高度在不同区间，选中不同吸顶条标签
				if (this.actualScrollViewTop >= 30 && this.actualScrollViewTop < this.goodsHeight - this.headerHeight) {
					this.tabsIndex = 0
				} else if (this.actualScrollViewTop < this.goodsHeight + this.reviewHeight - this
					.headerHeight) {
					this.tabsIndex = 1
				} else if (this.actualScrollViewTop < this.goodsHeight + this.reviewHeight + this
					.detailHeight - this
					.headerHeight) {
					this.tabsIndex = 2
				} else {
					this.tabsIndex = 3
				}

				
				// 页面初始进来可能会有些许滚动，当滚动到30以上时再进行动态
				if(this.actualScrollViewTop < 30){
					// 滚动高度在轮播图高度的一半时，颜色已经渐变为透明
				} else if (this.actualScrollViewTop < this.cn.rpx2px(750 / 2)) {
					let bgOpacity = 0.3 * (this.cn.rpx2px(750) - this.headerHeight - this.actualScrollViewTop) /
						this.goodsHeight
					this.bgColor = 'rgba(0, 0, 0, ' + bgOpacity + ')'
					this.color = '#fff'
				} else if (this.actualScrollViewTop < this.cn.rpx2px(750) - this.headerHeight) {
					this.bgColor = 'rgba(0, 0, 0, 0)'
					this.color = '#4d4d4d'
				} else {
					this.bgColor = 'rgba(0, 0, 0, 0)'
					this.color = '#4d4d4d'
				}
			},

			/**
			 * 滚动到底部，会触发 scrolltolower 事件
			 * @date 2023-01-31
			 */
			scrolltolower() {
				this.loadList(0)
			},

			/**
			 * 联系客服
			 * @date 2023-01-31
			 */
			account() {
				this.cn.callPhone(this.linkTel)
			},

			/**
			 * 返回顶部
			 * @date 2023-01-31
			 */
			topClick() {
				this.changeTabs({
					index: 0
				})
			},

			/**
			 * 获取推荐商品
			 * @param {int} isFirstPage 是否第一页 0--不是 1--是
			 * @date 2022-10-27
			 */
			loadList(isFirstPage) {
				mall.listProduct(this, isFirstPage, '', '', '', 1, '', '', 5)
			}
		}
	}
</script>

<style scoped>
	/* 滚动区域 */
	.scroll-block {
		height: 100vh;
	}

	/* 轮播图 */
	.swiper-block {
		width: 750rpx;
		height: 750rpx;
	}

	/* 商品详情 好物推荐 */
	.border-line {
		width: 80rpx;
		height: 1rpx;
		background: #ccc;
	}

	/* 返回顶部和返回首页 */
	.btn-block {
		position: fixed;
		z-index: 900;
		right: 30rpx;
		bottom: calc(var(--window-bottom) + var(--footerHeight) + 50rpx + env(safe-area-inset-bottom));
	}
</style>